<template>
	<div class="spaceWrap">
		<div class="spaceBanner">
			<img src="../../assets/spaceBg.png"/>
			<div class="personCenter" v-if="isLogin">
				<div class="tx">
					<img src="https://static.hdslb.com/images/member/noface.gif" alt="" />
				</div>
				<div class="ziliao">
					<p>账号资料</p>
				</div>
				<div class="main">
					<span>GLNUO</span>
					<div class="sbox">
						<svg class="index__icon__src-space-info- " aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-zhongxing"></use></svg>
					</div>
					<div class="lv">
						<div>
							<img src="https://s1.hdslb.com/bfs/static/mult/images/lv6.png" alt="" />
						</div>
						<div>
							
						</div>
						<div>
							<p>450/1500</p>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="loginField">
				<div class="register">
					<router-link to="/register">注册</router-link>
				</div>
				<div class="login">
					<router-link to="/login">登陆</router-link>
				</div>
			</div>
		</div>
		<div class="tabWrap">
			<div class="tabCon " :class="{active:tabIndex==1}" @click="changeTab(1)">
				<span>历史记录</span>
			</div>
			<div class="tabCon":class="{active:tabIndex==2}"  @click="changeTab(2)">
				<span>我的投稿</span>
			</div>
		</div>
		<div class="history" v-show="tabIndex==1">
			<div class="noCon">
				<img src="../../assets/noContent.png"/>
				<p>你还没有历史记录</p>
				<p>快去发现 <router-link to="/">新内容</router-link> 吧！</p>
			</div>
		</div>
		<div class="article" v-show="tabIndex==2">
			<div class="nologin">
				<img src="../../assets/login.png"/>
			</div>
			<p>你还没有登录哦~</p>
			<p>赶快登录打开新世界的大门</p>
		</div>
		<div class="footer">
			<div class="textCon">
				<p>哔哩哔哩 沪ICP备13002172号-3</p>
				<p>信息网络传播视听节目许可证：0910417</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created(){
			if(sessionStorage.getItem("isLogin")){
				this.isLogin=true
			}
		},
		data(){
			return {
				isLogin:false,
				tabIndex:1
			}
		},
		methods:{
			changeTab(index){
				index?index:1,
				this.tabIndex=index
			}
		}
	}
</script>

<style lang="scss" type="text/css">
	body{
		background-color:#f4f4f4 ;
	}
	.personCenter{
		background-color: white;
		height: 200px;
		position: relative;
		width: 100%;
		>.tx{
			position: absolute;
		    top:-45px;
		    z-index: 10;
		    left: 12px;
		    width: 90px;
		    height: 90px;
		    border-radius: 50%;
		    background: url(//static.hdslb.com/images/member/noface.gif) no-repeat;
		    background-size: 100% 100%;
		    overflow: hidden;
		    img{
		    	width: 100%;
		    }
		}
		.ziliao{
			    position: absolute;
			    z-index: 2;
			    top: 15px;
			    right: 20px;
			    border: 1px solid #fb7299;
			    border-radius: 4px;
			    width: 80px;
			    p{
			    	font-size: 16px;
				    line-height: 30px;
				    color: #fb7299;
				    text-align: center;
			    }
		}
		.main{
			font-size: 0;
			padding-top: 70px;
			width: 100%;
			>span{
				vertical-align: middle;
				font-size: 25px;
				padding-left: 15px;
			}
			.sbox{
				vertical-align: middle;
				width: 100%;
				display: inline-block;
				width: 25px;
				height: 25px;
				svg{
					fill: red;
					width: 100%;
					height: 100%;
				}
			}
			.lv{
				vertical-align: middle;
				display: inline-block;
				>div:first-of-type{
					vertical-align: middle;
					display: inline-block;
					width: 50px;
					height: 25px;
				}
				>div:nth-of-type(2){
					vertical-align: middle;
					display: inline-block;
					width: 40px;
					height: 25px;
					background-color: #ff0000;
				}
				>div:last-of-type{
					vertical-align: middle;
					display: inline-block;
					border-radius: 0 5px 5px 0;
					width: 60px;
					height: 25px;
					background-color: #757575;
					p{
						font-size: 14px;
						line-height: 25px;
						color: white;
					}
				}
			}
		}
	}
	.spaceWrap{
		padding-top: 45px;
		background: #f4f4f4;
	}
	.spaceBanner{
		width: 100%;
		position: relative;
		img{
			display: block;
			width: 100%;
		}
		.personCenter{
		
		}
	}
	.loginField{
		position: absolute;
		top: 53%;
		left: 25%;
		width: 50%;
		font-size: 12px;
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		div[class]{
			width: 40%;
			border-radius: 8%;
			a{
				display: block;
				width: 100%;
				line-height: 25px;
				text-align: center;
			}
		}
	}
	.register{
		float: left;
		background: #fff;
		a{
			color: #fb7299;
		}
	}
	.login{
		float: right;
		background: #fb7299;
		a{
			color:#fff
		}
	}
	.tabWrap{
		width: 100%;
		border-top: 1px solid #979797;
		border-bottom: 1px solid #979797;
		padding: 8px 0;
		background: #fff;
		.tabCon{
			position: relative;
			float: left;
			width: 50%;
			text-align: center;
			font-size: 12px;
			color:#666;
		}
		&:after{
			content: "";
			display: block;
			clear: both;
		}
		.active{
			
			span{
				color: #fb7299;
				padding-bottom: 3px;
				border-bottom: 2px solid #fb7299;
			}
			
		}
	}
	.article{
		background: #fff;
		.nologin{
			position: relative;
			padding-top: 72px;
			padding-bottom:13px;
			img{
				display: block;
				width: 78%;
				margin: 0 auto 20px auto;
			}
		}
		p{
			text-align: center;
			font-size: 12px;
			color: #999;
			line-height: 17px;
		}
	}
	.noCon{
		position: relative;
		padding-top: 72px;
		text-align: center;
		font-size: 12px;
		color: #999;
		img{
			display: block;
			width: 80%;
			margin: 0 auto;
		}
		p{
			line-height: 17px;
		}
		a{
			color: #fb7299;
		}
	}
	.footer{
		padding-top: 20px;
		padding-bottom: 34px;
		font-size: 12px;
		text-align: center;
		p{
			line-height: 20px;
			color: #999;
		}
	}
</style>